<template>
  <div>
    <h1 style="color:Orange;background: black">图片标注网站</h1>
    <h3 style="color: red">{{username}}的仓库</h3>
    <el-alert
      title="删除成功"
      type="success"
      v-show="this.showAlert"
      effect="dark">
     </el-alert>
    <el-alert
      title="任务创建成功"
      type="success"
      v-show="this.showAlertM"
      effect="dark">
     </el-alert>
    <!--在此展示图片-->
    <div>
      <el-button type="warning" style="float: left" @click="backtoHome">返回主页</el-button>
      <el-table
        ref="multipleTable"
        :data="imagePaths"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          :selectable="checkSelectable"
          width="100">
        </el-table-column>
        <el-table-column label="图片">
        　　<template slot-scope="scope">
        　　　　<img :src="scope.row.path" width="55" height="55" @click="gotoimageDetail(scope.row.path)" class="head_pic"/>
        　　</template>
        </el-table-column>
        <el-table-column label="是否已发布" width="100">
          <template slot-scope="scope">
            <p>{{scope.row.index}}</p>
          </template>
        </el-table-column>
    </el-table>
      <el-button style="margin-top:2%"  type="danger" @click="DeletePhotos">删除选中图片</el-button>
      <el-input style="margin-top:2%" placeholder="请输入任务描述" v-model="sentences"></el-input>
      <el-button style="margin-top:2%"  @click="CreateMission">创建任务</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MyGallery",
  data(){
     return {
      username: "未登录",
       imagePaths: [],
       selections: [],
       sentences: '',
       showAlertM: false,
       showAlert: false,
    }
  },
  //获取所有图片的json数据存到列表里
  created() {
      this.getImageList()
    },
  methods: {
    gotoimageDetail(url){
      url = url.substr(8)
      // console.log(url)
      let fullurl = "http://127.0.0.1:8000" + url;
      window.location.href = fullurl
    }
    ,
    getImageList(){
      this.selections = []
      this.imagePaths = []
      this.sentences = ''
      this.showAlert = false
      this.showAlertM = false
      this.username = window.sessionStorage.getItem("user")
      axios.post("http://127.0.0.1:8000/showimages/",
        {"token": window.sessionStorage.getItem("token")}
      ).then((response) => {
        // 如果token过期
        if (response.data.code === '101')
        {
          this.$router.push({path:"/LoginPage"})
        }
        let elements = JSON.parse(JSON.stringify(response.data.image))
        let hasEs = JSON.parse(JSON.stringify(response.data.yes))
        let Ids = JSON.parse(JSON.stringify(response.data.id))
        for (const e in elements)
        {
          this.imagePaths.push({path:elements[e], ids: Ids[e],index: hasEs[e]===false?"否":"是"})
        }
      })
    },
    // 以选中图片创建任务
    CreateMission(){
    // 弹出文本框，要求用户输入任务描述
      if (this.sentences === "")
      {
        this.$alert("任务描述为空")
        return
      }
      console.log(this.sentences)
      axios.post(
        "/mission/createmission/",
        {
          "token": window.sessionStorage.getItem("token"),
          "createList": this.selections,
          "des": this.sentences
        }
      ).then((response) => {
        let code = response.data.code
        if (code === 101)
        {
          this.reportADueToken()
        }
        else{
          this.showAlertM = true
            //刷新资源显示
          this.getImageList()
        }
      })
    },
    // 删除选中图片
    DeletePhotos(){
      axios.post("http://127.0.0.1:8000/deleteimages/",
        {
          "token": window.sessionStorage.getItem("token"),
          "deleteList":this.selections
        }).then(
        (response)=>{
          // console.log(response.data.code)
          let code = response.data.code
          if (code === 101)
          {
            this.reportADueToken()
          }
          else{
            this.$message.success("删除成功！将刷新页面显示")
            //刷新资源显示
            this.getImageList()
          }
        }
      )

      // 刷新页面

    },
    // 用户选择发生变化
    handleSelectionChange(val){
      this.selections = val;
      // console.log(this.selections)
    },
    // 是否可以选择
    checkSelectable(row, index){
      return row.index === "否"
    },
    reportADueToken(){
      // token 过期
      window.sessionStorage.removeItem("token")
      this.$alert('token过期，请重新登录', '失败', {confirmButtonText: '确定'})
      this.$router.push({path:"/LoginPage"})
    },
    backtoHome(){
      this.$router.push({path: "/MainPage"})
    }
  }
}
</script>

<style scoped>

</style>
